/* eslint-disable @typescript-eslint/no-unused-vars */
// 样式-数据-开启合计
import React from 'react';
import { Switch } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { COMPLEX_CODE } from './EnumConfig';
import { debounce } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const OpenTotal = ( props: IProps ) => {
	const { form, config, onValuesChange } = props;
	const {
		openTotal,
		openRowTotal,
		openColumnTotal,
		openRowSubtotal,
		openColumnSubtotal,
	} = config.data;

	const onSwitchChange = ( checked, name ) => {
		form.setFieldsValue( { [name]: checked } );
		console.log( checked, name );
		onValuesChange( config.type, config.key, { [name]: checked }, 'data' );
	};
	const { tableType } = config.data;

	return (
		<>
			<FormItem label="" name="openTotal">
				<LabelSwitch
					name="openTotal"
					onValuesChange={onSwitchChange}
					label="开启合计"
					checked={openTotal}
				></LabelSwitch>
			</FormItem>
			{openTotal && (
				<>
					{/* <FormItem label="" name="openRowTotal">
						<LabelSwitch
							name="openRowTotal"
							onValuesChange={onSwitchChange}
							checked={openRowTotal}
							label="行合计"
						></LabelSwitch>
					</FormItem> */}
					<FormItem label="" name="openColumnTotal">
						<LabelSwitch
							name="openColumnTotal"
							onValuesChange={onSwitchChange}
							checked={openColumnTotal}
							label="列合计"
						></LabelSwitch>
					</FormItem>
					{tableType === COMPLEX_CODE && (
						<>
							{/* <FormItem label="" name="openRowSubtotal">
								<LabelSwitch
									name="openRowSubtotal"
									checked={openRowSubtotal}
									onValuesChange={onSwitchChange}
									label="行小计"
								></LabelSwitch>
							</FormItem>

							<FormItem label="" name="openColumnSubtotal">
								<LabelSwitch
									name="openColumnSubtotal"
									checked={openColumnSubtotal}
									onValuesChange={onSwitchChange}
									label="列小计"
								></LabelSwitch>
							</FormItem> */}
						</>
					)}
				</>
			)}
		</>
	);
};

const LabelSwitch = ( props: any ) => {
	const { label, onValuesChange, name, checked } = props;

	return (
		<div
			style={{
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'space-between',
			}}
		>
			<label>{label}</label>
			<Switch
				checked={checked}
				onChange={
					debounce( ( value ) => onValuesChange( value, name ), 500 )
				}
			></Switch>
		</div>
	);
};

export default React.memo( OpenTotal );
